<template>
  <div class="page">
    <!-- <i class="iconfont h-icon-xiaolian1"></i>

    <svg class="icon" aria-hidden="true">
      <use xlink:href="#h-icon-xiaolian"></use>
    </svg> -->
    <div class="textarea">
      <a-textarea
        v-model="msg"
        placeholder="请发送你需要提问chatGPT的问题"
        :auto-size="{ minRows: 3, maxRows: 5 }"
        allowClear
        @pressEnter="sendMessage"
      />
      <a-button type="primary" @click="sendMessage" :loading="loading" :disabled="loading">发送</a-button>
      <a-textarea
        v-model="msgNew"
        placeholder="请发送你需要提问chatGPT的问题"
        :auto-size="{ minRows: 3, maxRows: 5 }"
        allowClear
        @pressEnter="sendMessage"
      />
      <div class="spancss">
        <a-spin :spinning="loading" />
        <span v-show="messageList.length">当前已提问：{{ messageList.length }}条数据</span>
      </div>
    </div>
    <div class="body">
      <div v-for="(item, index) in messageList" :key="index" class="bodyMessage">
        <a-card :title="item.Questions">
          <p>{{ item.ChatGPT_Answer }}</p>
        </a-card>
        <br />
      </div>
    </div>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js/crypto-js'
import { chatGptApi } from '@/api/chatGpt'
export default {
  name: 'Home',
  data() {
    return {
      msg: '',
      msgNew: '',
      loading: false,
      //回复的消息
      messageList: [],
    }
  },
  created() {
    this.loadinit()
  },
  methods: {
    //发送消息
    sendMessage() {
      if ((this.msg ?? '') === '') {
        this.$message.warning('请输入内容！')
        return
      }
      var parts = this.msg.split('//')
      console.log(parts)
      let urlPart = parts[1].substring(parts[1].indexOf('/'))
      console.log(urlPart)
      if (urlPart.indexOf('?') !== -1) {
        urlPart = urlPart.split('?')[0]
      }
      const aaa = CryptoJS.MD5(urlPart + 'wycheck').toString()
      this.msgNew = this.testfunction(aaa)

      // this.$message.success('正在请求中...')
      // this.loading = true
      // chatGptApi(this.msg)
      //   .then((res) => {
      //     this.$message.success('请求成功！')
      //     this.messageList.unshift(res)
      //     this.loading = false
      //   })
      //   .catch((err) => {
      //     this.loading = false
      //     this.$message.error(err.msg)
      //   })
    },
    testfunction(a) {
      return a.substr(0, 16)
    },
    loadinit() {
      console.log('User-Agern', navigator.userAgent)
      var users = [
        { user: 'a', age: 48 },
        { user: 'b', age: 34 },
        { user: 'a', age: 42 },
        { user: 'b', age: 55 },
      ]

      var c = this._lodash.orderBy(users, ['age'], ['desc'])
      console.log('age降序排列:', c)

      var d = this._lodash.orderBy(users, ['user', 'age'], ['desc', 'asc'])
      console.log('user降序,age升序排序:', d)
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  .textarea {
    height: 17%;
    width: 50%;
    .textareaInput {
      background: #000;
    }
    button {
      top: 24px;
      width: 15%;
    }
    .spancss {
      padding-left: 164px;
      display: flex;

      align-items: center;
    }
  }
  .body {
    height: 83%;
    overflow-y: auto;
    border: 1px solid #d9d9d9;
    .bodyMessage {
      padding: 10px;
    }
  }
}
</style>
>
